<template>
	<!-- 授权用户 -->
	<el-dialog title="添加人员" v-model="visible" width="500px" append-to-body>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" v-loading="loading">
			<el-form-item label="角色名称" prop="roleName">
				<el-input v-model="form.roleName" placeholder="请输入用户名称" disabled />
			</el-form-item>
			<el-form-item label="选择成员" prop="userId">
				<el-tree-select
					v-model="form.userId"
					:props="{ value: 'id', isLeaf: 'isLeaf', children: 'children' }"
					value-key="id"
					placeholder="请选择成员"
					lazy
					:load="getUserList"
					multiple>
					<template #default="{ data }">
						<div class="tree-select-item" :class="data.disabled && data.type === 'user'? 'disable' : ''">
							<el-icon size="14" class="dept" v-if="data.type === 'dept'"><Folder /></el-icon>
							<el-icon v-else><User /></el-icon>
							<span>{{ data.label }}</span>
						</div>
					</template>
				</el-tree-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup name="SelectUser">
import { authUserSelectAll } from "@/api/system/role"
import { treeDept } from "@/api/system/dept"

const props = defineProps({
  roleId: {
    type: [Number, String]
  },
	roleName: {
		type: String
	}
})

const { proxy } = getCurrentInstance()
const emit = defineEmits(["ok"])

const loading = ref(false)
const data = reactive({
  form: {},
  rules: {
    userId: [{type: 'array', required: true, message: "请选择成员", trigger: ["blur", "change"] }]
  }
})
const { form, rules } = toRefs(data)
const visible = ref(false)

function reset() {
  form.value = {
    roleId: props.roleId,
		roleName: props.roleName,
		userId: undefined
  }
  proxy.resetForm("formRef")
}

// 显示弹框
function show() {
	reset()
  getUserList()
  visible.value = true
}

// 查询表数据
function getUserList(node, resolve) {
	let params = {parentId: node?.data.id, roleId: props.roleId, noUser: false,  stage: true}
  treeDept(params).then(res => {
		const result = res.result || []
		result.forEach(item => {
			item.isLeaf = item.type === 'user'
			item.disabled = item.disable || item.type === 'dept'
    })
    resolve && resolve(result)
  })
}

function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
			loading.value = true
			authUserSelectAll(props.roleId, form.value.userId).then(res => {
				loading.value = false
				proxy.$modal.msgSuccess("添加成功")
				cancel()
				emit("ok")
			})
    }
  })
}

function cancel() {
  visible.value = false
}


defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.tree-select-item{
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--el-text-color-regular);
  cursor: pointer;
	.dept {
		color: var(--el-color-primary);
	}
	&.disable{
		color: var(--el-text-color-placeholder);
    cursor: not-allowed;
	}
}
</style>
